<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/public.css" />
    <!-- px转rem js -->
    <script type="text/javascript" src="../../script/lib-flexible.js"></script>
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <style>
        html,
        body {
            background-color: #ededed;
        }

        .middle {
            position: relative;
            margin-bottom: .11rem;
            height: 1.07rem;
            border-radius: .07rem;
            background-color: #fff;
        }

        .middle img {
            height: .53rem;
            padding: .27rem;
        }

        .left_img {
            position: absolute;
            left: 0;
            z-index: 999;
        }

        .right_img {
            position: absolute;
            right: 0;
            z-index: 999;
            display: none;
        }

        .middle>input {
            height: 1.07rem;
            line-height: 1.07rem;
            color: #333;
            font-size: .32rem;
            outline: none;
            width: 100%;
            margin: 0 1.07rem;
        }

        .list {
            overflow: hidden;
        }

        .list .item {
            vertical-align: middle;
            height: 1.76rem;
            background-color: #fff;
            position: relative;
            -webkit-transform: translateX(0px);
            transition: transform 0.2s;
            -webkit-transition: transform 0.2s;
            -webkit-transform: translate3d(0, 0, 0);
            -moz-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }

        .list .item .swiper-li {
            display: block;
            height: 1.76rem;
            line-height: 1.76rem;
            -webkit-transition: all 0.1s linear;
            transition: all 0.1s linear;
            color: inherit;
            padding: 0.2rem 0.6rem;
        }

        .left-img {
            position: absolute;
            height: 1.76rem;
            width: 1.33rem;
            line-height: 1.76rem;
            left:5%;
            top:18%;
            justify-content: center;
            align-items: center;
        }

        .left-img img {
            height: 1.33rem;
            width: 1.33rem;
            border-radius: 50%;
        }

        .left-img .badge {
            position: absolute;
            z-index: 99;
            top: .14rem;
            right: -.2rem;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            min-width: .5rem;
            height: .5rem;
            line-height: .5rem;
            font-size: .25rem;
            color: #fff;
            border-radius: 50%;
            background-color: #ff2600;
            text-decoration: none;
        }

        .center-name {
            font-size: .45rem;
            font-weight: 1000;
            color: black;
            line-height: .45rem;
            top: 27%;
            left:23%;
            position: absolute;
        }

        .center-body {
            font-size: .33rem;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: .54rem;
            top: 58%;
            left:23%;
            position: absolute;
        }

        .center-body>span {
            color: #FD2626;
            margin-right: .14rem;
        }

        .center-body img {
            height: .45rem;
            width: .45rem;
            vertical-align: middle;
        }

        .right-time {
            position: absolute;
            top:19%;
            left:75%;
            font-size: .33rem;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            line-height: .54rem;
        }

        .settop {
            position: absolute;
            right: -1.78rem;
            bottom: 0;
            width: 1.78rem;
            line-height: 1.78rem;
            height: 1.78rem;
            text-align: center;
            background: #adadad;
            color: #fff;
            font-size: .42rem;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            font-style: normal
        }

        .dell {
            position: absolute;
            right: -3.56rem;
            bottom: 0;
            width: 1.78rem;
            line-height: 1.78rem;
            height: 1.78rem;
            text-align: center;
            background: #F63746;
            color: #fff;
            font-size: .42rem;
            font-weight: 400;
            color: rgba(255, 255, 255, 1);
            font-style: normal
        }

        .border-1px-bottom:last-child::after {
            border: 0px;
        }
    </style>
</head>

<body>
    <div class="list" v-cloak>
        <div class="item border-1px-bottom" v-for="(lists,index) in list" style="padding-top:2%;" @click="fnOpenChat(lists.name,lists.user_id);">
            <div class="swiper-li">
                <div class="flex-wrap">
                    <div class="left-img">
                        <img v-bind:src="imghead+lists.avatar"/>
                        <div class="badge" v-if="lists.count>0&&lists.count<=99">{{lists.count}}</div>
                        <div class="badge" v-if="lists.count>99">99+</div>
                    </div>
                    <div class="flex-con">
                        <div class="center-name">
                            {{lists.name}}
                        </div>
                        <div class="center-body" v-html="fnType(lists.last_message.type,index)"></div>
                        <!---->
                    </div>
                    <div class="right-time">
                        {{lists.last_message.time|formatTime}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<!-- 消除移动端点击延迟300ms -->
<script type="text/javascript" src="../../script/fastclick.js"></script>
<!-- 公共js -->
<script type="text/javascript" src="../../script/common.js"></script>
<!-- 环信接口 -->
<script type="text/javascript" src="../../script/easeChat.js"></script>
<!-- sha1加密 -->
<script type="text/javascript" src="../../script/SHA1.js"></script>
<!-- 滑动 -->
<script type="text/javascript" src="../../script/swiper.js"></script>
<!-- 表情转换js -->
<script type="text/javascript" src="../../script/emotion.js"></script>
<script type="text/javascript">
    var imghead = "http://1.82.238.228:80/files/";
    var message_url="http://1.82.238.228:80/api/message/";//1.82.238.228:80
    apiready = function() {
        window.ListVue = new Vue({
            el: '.list',
            data: {
                list: [],
                timeout: false
            },
            mounted: function() {
                this.$nextTick(function() {
                    this.fnInit();
                });
            },
            beforeDestroy: function() {
                this.timeout = true;
            },
            methods: {
                fnInit: function(){
                  $.ajax({
                      type: 'POST',
                      url: message_url+"getPrivateMessageList/",
                      data: JSON.stringify({user_id:$api.getStorage('user_id')}),
                      dataType: 'json',
                      async: false,
                      success:function(result){
                        console.log('获取消息列表成功');
                        window.ListVue.list = result.data;
                      },
                      error:function(){
                        console.log('获取消息列表失败！');
                      },
                  });
                  if (!this.timeout) {
                    setTimeout(this.fnInit, 5000);
                  }
                },
                fnType: function(types, index) {

                    //text：文本类型
                    //image：图片类型
                    //video：视频类型
                    //location：位置类型
                    //voice：语音类型
                    //file：文件类型
                    if (types == "text") {
                      if (window.ListVue.list[index].last_message.text == '' || window.ListVue.list[index].last_message.text == undefined) {
                            return;
                        }
                        msg = window.ListVue.list[index].last_message.text;
                        var emotionObj = emotion;
                        var regx = /\[(.*?)\]/gm;
                        var translateMSg = window.ListVue.list[index].last_message.text.replace(regx, function(math) {
                            var imgSrc = emotionObj[math];
                            if (!imgSrc) {
                                return math;
                            }
                            var img = '<img src="../res/img/emotion/' + imgSrc + '.png" class="emotion">'
                            return img;
                        })
                        return translateMSg;
                    }
                    if (types == "voice") {
                        return "[语音]";
                    }
                    if (types == "image") {
                        return "[图片]";
                    }
                    if (types == "video") {
                        return "[视频]";
                    }
                    if (types == "location") {
                        return "[位置]";
                    }
                    // if (c.draft) {
                    //     c.latestMessage.text = '[草稿] ' + c.draft;
                    // }
                    // var typeMap = {
                    //     'RC:TxtMsg': '[文本]',
                    //     'RC:VcMsg': '[语音]',
                    //     'RC:ImgMsg': '[图片]',
                    //     'RC:ImgTextMsg': '[图文]'
                    // }
                    // return
                    // return c.objectName == 'RC:TxtMsg' ? c.latestMessage.text : typeMap[c.objectName];
                },
                //打开聊天窗口
                fnOpenChat: function(name,id) {
                    api.openWin({
                        name: 'chat_win',
                        url: './chat_win.html',
                        slidBackEnabled: true,
                        pageParam: {
                            name: name,
                            id: id
                        }
                    });
                }
            },
            filters: {
                // 时间转换
                formatTime: function(v) {
                    return new Date(v).popular();
                }

            }
        });
    };
</script>

</html>
